body {
    position: relative;
}
span {
    cursor: pointer;
    height: 40px;
    line-height: 40px;
    text-align: center;
    display: inline-block;
    color: #333;
    background: #ccc;
    min-width: 80px;
    padding: 0 10px;
    margin: 10px;
    -webkit-transition: all 400ms linear;
}
/*.lt-big,.lt-small,*/
/*.lt-skewLeft,.lt-skewRight,.lt-skewLeftTop,.lt-skewRightTop,.lt-skewLeftBottom,.lt-skewRightBottom,*/
/*.lt-grow-rotate-l,.lt-grow-rotate-r,.lt-rotate5,.lt-rotate15,.lt-rotate30,.lt-rotate60,.lt-rotate90,.lt-rotate180,.lt-rotate360,.lt-rotate-5,.lt-rotate-15,.lt-rotate-30,.lt-rotate-60,.lt-rotate-90,.lt-rotate-180,*/
/*.lt-taranslate-top,.lt-taranslate-bottom,.lt-taranslate-left,.lt-taranslate-right {*/
/*-webkit-transition: all 400ms linear;*/
/*}*/
.lt-big:hover {
    -webkit-transform: scale(1.1);
}
.lt-small:hover {
    -webkit-transform: scale(0.9);
}


.lt-skewLeft:hover {
    -webkit-transform: skew(-15deg);
}
.lt-skewRight:hover {
    -webkit-transform: skew(15deg);
}
.lt-skewLeftTop:hover {
    -webkit-transform: skew(15deg);
    -webkit-transform-origin:0 100% ;
}
.lt-skewRightTop:hover {
    -webkit-transform: skew(-15deg);
    -webkit-transform-origin:0 100% ;
}
.lt-skewLeftBottom:hover {
    -webkit-transform: skew(-15deg);
    -webkit-transform-origin:100% 0 ;
}
.lt-skewRightBottom:hover {
    -webkit-transform: skew(15deg);
    -webkit-transform-origin:100% 0 ;
}

.lt-grow-rotate-l:hover {
    -webkit-transform: scale(1.1) rotate(-5deg);
}
.lt-grow-rotate-r:hover {
    -webkit-transform: scale(1.1) rotate(5deg);
}
.lt-rotate5:hover {
    -webkit-transform: rotate(5deg);
}
.lt-rotate15:hover {
    -webkit-transform: rotate(15deg);
}
.lt-rotate30:hover {
    -webkit-transform: rotate(30deg);
}
.lt-rotate60:hover {
    -webkit-transform: rotate(60deg);
}
.lt-rotate90:hover {
    -webkit-transform: rotate(90deg);
}
.lt-rotate180:hover {
    -webkit-transform: rotate(180deg);
}
.lt-rotate360:hover {
    -webkit-transform: rotate(360deg);
}
.lt-rotate-5:hover {
    -webkit-transform: rotate(-5deg);
}
.lt-rotate-15:hover {
    -webkit-transform: rotate(-15deg);
}
.lt-rotate-30:hover {
    -webkit-transform: rotate(-30deg);
}
.lt-rotate-60:hover {
    -webkit-transform: rotate(-60deg);
}
.lt-rotate-90:hover {
    -webkit-transform: rotate(-90deg);
}
.lt-rotate-180:hover {
    -webkit-transform: rotate(-180deg);
}

.lt-taranslate-top:hover {
    /*-webkit-transform: translate(0,-10px);*/
    -webkit-transform: translate3d(0,-10px,0);
}
.lt-taranslate-bottom:hover {
    -webkit-transform: translate(0,10px);
    /*-webkit-transform: translate3d(0,10px,0);*/
}
.lt-taranslate-left:hover {
    -webkit-transform: translate(-10px);
    /*-webkit-transform: translate3d(-10px,0,0);*/
}
.lt-taranslate-right:hover {
    -webkit-transform: translate(10px);
    /*-webkit-transform: translate3d(10px,0,0);*/
}

/**
 * box-shadow: h-shadow v-shadow blur spread color inset;
 * blur:可选。模糊距离。spread:可选。阴影的尺寸。color:	可选。阴影的颜色。inset:可选。将外部阴影
 */
.lt-border-out:hover {
    -webkit-box-shadow: 0 0 0 4px #09f, 0 0 1px transparent;
}
.lt-border-in:hover {
    -webkit-box-shadow: inset 0 0 0 4px #09f, 0 0 1px transparent;
}


.lt-shadow:hover {
    -webkit-box-shadow: 0 0 10px #333;
}
.lt-shadow-in:hover {
    -webkit-box-shadow: inset 0 0 10px #333;
}
.lt-shadow-write:hover {
    -webkit-box-shadow: inset 0 0 20px #fff;
}
.lt-shadow-big:hover {
    -webkit-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
    transform: scale(1.1);
}


.lt-fade-out:hover {
    opacity: 0.6;
}
.lt-fade-in {
    opacity: 0.6;
}
.lt-fade-in:hover {
    opacity: 1;
}
.lt-rectangle:hover {
    border-radius: 10px;
}
.lt-radius {
    border-radius: 10px;
}
.lt-radius:hover {
    border-radius: 0;
}

/*当前元素 作用于 after before*/
.lt-fade, .lt-fade-t, .lt-fade-b, .lt-fade-l, .lt-fade-r, .lt-fade-c-in, .lt-fade-m-in, .lt-fade-m-out, .lt-fade-c-out, .lt-overline-r, .lt-overline-l, .lt-underline-r, .lt-underline-l, .lt-underline-c, .lt-overline-c, .lt-underline-c-out, .lt-overline-c-out, .lt-arrow-l, .lt-arrow-r, .lt-arrow-t, .lt-arrow-b, .lt-arrow-l-move, .lt-arrow-r-move, .lt-arrow-t-move, .lt-arrow-b-move, .lt-bounce-t, .lt-bounce-b, .lt-bounce-r, .lt-bounce-l {
    position: relative;
    transition: all .3s;
    z-index: 1;
}
/*白色字体*/
.lt-fade:hover, .lt-fade-t:hover, .lt-fade-b:hover, .lt-fade-l:hover, .lt-fade-r:hover, .lt-fade-c-in:hover, .lt-fade-m-in:hover, .lt-fade-m-out:hover, .lt-fade-c-out:hover, .lt-bounce-t:hover, .lt-bounce-b:hover, .lt-bounce-r:hover, .lt-bounce-l:hover {
    color: #fff;
}
/*当前元素的:before和:after设置绝对定位*/
.lt-fade:before, .lt-fade-t:before, .lt-fade-b:before, .lt-fade-l:before, .lt-fade-r:before, .lt-fade-c-in:before, .lt-fade-m-in:before, .lt-fade-m-out:before, .lt-fade-c-in:after, .lt-fade-m-in:after, .lt-fade-c-out:before {
    position: absolute;
    transition: all 300ms;
    content: "";
    display: block;
    background: #09f;
    z-index: -1;
    width: 100%;
    height: 100%;
}
/**/
.lt-fade-t:hover:before, .lt-fade-b:hover:before, .lt-fade-m-out:hover:before, .lt-bounce-b:hover:before, .lt-bounce-t:hover:before {
    transform: scaleY(1);
}
.lt-fade-l:hover:before, .lt-fade-r:hover:before,.lt-fade-c-out:hover:before, .lt-bounce-l:hover:before, .lt-bounce-r:hover:before, .lt-overline-l:hover:before, .lt-overline-r:hover:before, .lt-underline-l:hover:before, .lt-underline-r:hover:before, .lt-underline-c-out:hover:before, .lt-overline-c-out:hover:before {
    transform: scaleX(1);
}
.lt-fade-c-in:hover:before, .lt-fade-c-in:hover:after, .lt-overline-c:hover:after, .lt-overline-c:hover:before, .lt-underline-c:hover:after, .lt-underline-c:hover:before {
    transform: scaleX(.51);
}
.lt-fade-m-in:hover:before, .lt-fade-m-in:hover:after {
    transform: scaleY(.51);
}
/*弹跳元素:before和:after设置绝对定位和运动曲线*/
.lt-bounce-t:before, .lt-bounce-b:before, .lt-bounce-r:before, .lt-bounce-l:before {
    transition: all 300ms;
    transition-timing-function: cubic-bezier(0.52, 1.7, 0.5, 0.4);
    position: absolute;
    content: "";
    display: block;
    background: #09f;
    z-index: -1;
    width: 100%;
    height: 100%;
}
/*背景颜色和文字变化*/
.lt-fade:before {
    top: 0;
    left: 0;
    transform: scaleX(1);
    opacity: 0;
}
.lt-fade:hover:before {
    opacity: 1;
    color: #ffffff;
}
.lt-fade-t:before,.lt-bounce-t:before {
    bottom: 0;
    left: 0;
    transform-origin: center top;
    transform: scaleY(0);
}
.lt-fade-b:before,.lt-bounce-b:before {
    bottom: 0;
    left: 0;
    transform-origin: center bottom;
    transform: scaleY(0);
}
.lt-fade-l:before,.lt-bounce-l:before {
    left: 0;
    top: 0;
    transform-origin: left center;
    transform: scaleX(0);
}
.lt-fade-r:before,.lt-bounce-r:before {
    left: 0;
    top: 0;
    transform-origin: right center;
    transform: scaleX(0);
}

.lt-fade-c-out:before{
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    transform: scaleX(0);

}
.lt-fade-c-in:before{
    top: 0;
    left: 0;
    transform-origin: left center;
    transform: scaleX(0);
}
.lt-fade-c-in:after {
    top: 0;
    right: 0;
    transform-origin: right center;
    transform: scaleX(0);
}
.lt-fade-m-out:before{
    top: 0;
    left: 0;
    transform-origin: center center;
    transform: scaleY(0);
}
.lt-fade-m-in:before{
    top: 0;
    left: 0;
    transform-origin: center top;
    transform: scaleY(0);
}
.lt-fade-m-in:after {
    bottom: 0;
    left: 0;
    transform-origin: center bottom;
    transform: scaleY(0);
}

/*上划线和下划线变化*/
/*初始化:after:before大小*/
.lt-overline-r:before, .lt-overline-l:before, .lt-underline-l:before, .lt-underline-r:before, .lt-underline-c:before, .lt-overline-c:before, .lt-underline-c:after, .lt-overline-c:after, .lt-underline-c-out:before, .lt-overline-c-out:before {
    position: absolute;
    transition: all .3s;
    content: "";
    display: block;
    background: #09f;
    z-index: -1;
    height: 4px;
    width: 100%;
    transform: scaleX(0);
}
.lt-overline-l:before {
    top: 0;
    left: 0;
    transform-origin: left center;
}
.lt-overline-r:before {
    top: 0;
    left: 0;
    transform-origin: right center;
}
.lt-underline-l:before {
    bottom: 0;
    left: 0;
    transform-origin: left center;
}
.lt-underline-r:before {
    bottom: 0;
    left: 0;
    transform-origin: right center;
}
.lt-underline-c:before {
    bottom: 0;
    left: 0;
    transform-origin: left center;
}
.lt-underline-c:after {
    bottom: 0;
    left: 0;
    transform-origin: right center;
}
.lt-underline-c-out:before {
    bottom: 0;
    left: 0;
    transform-origin: center center;
}
.lt-overline-c:before {
    top: 0;
    left: 0;
    transform-origin: left center;
}
.lt-overline-c:after {
    top: 0;
    left: 0;
    transform-origin: right center;
}
.lt-overline-c-out:before {
    top: 0;
    left: 0;
    transform-origin: center center;
}